<template>
    <q-btn round flat icon="settings" size="13px">
        <q-menu>
            <div class="row no-wrap q-pa-md">
                <div class="column">
                    <div class="text-h6 q-mb-md">设置</div>
                    <q-radio v-model="selection" val="online" label="在线" color="green"/>
                    <q-radio v-model="selection" val="cyan" label="离线" color="red"/>
                </div>
                <q-separator vertical inset class="q-mx-lg"/>
                <div class="column items-center ">
                    <q-avatar size="72px">
                        <img :src="loginUser.avatar">
                    </q-avatar>

                    <div class="text-subtitle1 q-mt-md q-mb-xs">{{loginUser.nick}}
                        <q-popup-edit v-model="loginUser.nick" content-class="bg-white text-green" @save="saveNickName">
                            <q-input clearable color="green" v-model="loginUser.nick"
                                     :rules="[
                                              val => !!val || '不能为空*',
                                              val => val.length < 5 || '最多不能超过5个字',
                                            ]"
                                     dense autofocus counter>
                                <template v-slot:append>
                                    <q-icon name="edit"/>
                                </template>
                            </q-input>
                        </q-popup-edit>
                    </div>
                    <q-btn
                            flat
                            style="background: #3db16b; color: white"
                            label="退出"
                            push
                            @click="logout"
                            size="sm"
                            v-close-popup
                    />
                </div>
            </div>
        </q-menu>
    </q-btn>
</template>

<script>
  import JIM from "../../../utils/JIM";
  import MsgUtil from "../../../utils/msgUtils";
  export default {
    name: "AccountSetting",
    data () {
      return {
        selection: 'online'
      }
    },
    props: {
      loginUser: {}
    },
    methods: {
      logout () {
        JIM.close()
        window.location.href = '#/login'
      },
      saveNickName (newVal, oldVal) {
        if (newVal && newVal.length < 5) {
            console.log("baocun")
          MsgUtil.sendSuccess("修改昵称成功")
        }else{
          this.loginUser.nick = oldVal
        }
      }
    }
  }
</script>

<style scoped>

</style>
